<template>
  <div class="text-right mr-10">
    <div></div>
    <span v-if="mode == 1">
      <HeartOutlined
        class="cursor-pointer"
        @click.stop="handleClick(0)"
        :style="[{ color: myCount > 0 ? '#e63674' : '#ccc', fontSize: '16px' }]"
      />
      <span class="ml-2 cursor-pointer" @click.stop="handleClickCount">{{ count }}</span>
    </span>
    <span v-else>
      <span class="cursor-pointer"
        ><span @click.stop="handleClick(5)"
          ><StarOutlined
            :style="[{ color: myVal == 5 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          /><StarOutlined
            :style="[{ color: myVal == 5 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          /><StarOutlined
            class="mr-1"
            :style="[{ color: myVal == 5 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          />
          好评</span
        >
        <span class="ml-1" @click.stop="handleClickCount">{{ count5 }}</span></span
      >
      <span class="ml-2 cursor-pointer"
        ><span @click.stop="handleClick(3)"
          ><StarOutlined
            class="ml-2"
            :style="[{ color: myVal == 3 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          /><StarOutlined
            class="mr-1"
            :style="[{ color: myVal == 3 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          />中评</span
        ><span class="ml-1" @click.stop="handleClickCount">{{ count3 }}</span></span
      >
      <span class="ml-2 cursor-pointer"
        ><span @click.stop="handleClick(1)"
          ><StarOutlined
            class="ml-2 mr-1"
            :style="[{ color: myVal == 1 ? '#edc40d' : '#ccc', fontSize: '16px' }]"
          />差评</span
        ><span class="ml-1" @click.stop="handleClickCount">{{ count1 }}</span></span
      >
    </span>
  </div>
  <SmartModuleSelDrawer @register="registerSmartModuleSelDrawer" />
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, watch, unref } from 'vue';
  import { HeartOutlined, StarOutlined } from '@ant-design/icons-vue';
  import { getLikeCount, giveLike } from '/@/api/module/model';
  import SmartModuleSelDrawer from './smartModuleSelDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    name: 'GiveLike',
    components: {
      HeartOutlined,
      StarOutlined,
      SmartModuleSelDrawer,
    },
    props: {
      moduleCode: {
        type: String,
        default: '',
      },
      mode: {
        type: Number,
        default: 0,
      },
      moduleId: {
        type: Number,
        default: -1,
      },
    },
    emits: ['ok'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const count = ref(0);
      const myCount = ref(0);
      const count1 = ref(0);
      const count3 = ref(0);
      const count5 = ref(0);
      const myVal = ref(0);

      async function fetch() {
        let params = {
          moduleId: props.moduleId,
          moduleCode: props.moduleCode,
          mode: props.mode,
          val: 0,
        };
        let data = await getLikeCount(params);
        if (props.mode == 1) {
          count.value = data.count;
          myCount.value = data.myCount;
        } else {
          count1.value = data.count1;
          count3.value = data.count3;
          count5.value = data.count5;
          myVal.value = data.myVal;
        }
      }

      const handleClick = async (val = 0) => {
        let params = {
          moduleId: props.moduleId,
          moduleCode: props.moduleCode,
          mode: props.mode,
          val: val,
        };
        let data = await giveLike(params);
        if (props.mode == 1) {
          if (data.isGiveLike) {
            count.value++;
            myCount.value++;
            createMessage.success('点赞成功');
          } else {
            count.value--;
            myCount.value--;
            createMessage.success('取消点赞');
          }
        } else {
          if (data.hasOwnProperty('isGiveLike') && !data.isGiveLike) {
            myVal.value = 0;

            if (val == 1) {
              count1.value--;
            } else if (val == 3) {
              count3.value--;
            } else {
              count5.value--;
            }
            createMessage.success('取消点评');
          } else {
            myVal.value = val;

            if (val == 1) {
              count1.value++;
            } else if (val == 3) {
              count3.value++;
            } else {
              count5.value++;
            }

            let oldVal = data.oldVal;
            if (oldVal > 0) {
              if (oldVal == 1) {
                count1.value--;
              } else if (oldVal == 3) {
                count3.value--;
              } else {
                count5.value--;
              }
            }

            createMessage.success('点评成功');
          }
        }
      };

      // onMounted(() => {
      //   fetch();
      // });

      const [registerSmartModuleSelDrawer, { openDrawer: openSmartModuleSelDrawer }] = useDrawer();

      const handleClickCount = () => {
        openSmartModuleSelTableDrawer(0, 3, {
          moduleCode: 'give_like',
          listPageParams: {
            moduleId: props.moduleId,
            moduleCode: 'give_like',
            mainModuleCode: props.moduleCode,
          },
        });
      };

      let myStart = 1;
      function openSmartModuleSelTableDrawer(selMode = 1, start = 1, params: object) {
        console.log('smart openModuleSelDrawer');
        myStart = start;
        openSmartModuleSelDrawer(true, {
          selMode, // 1 单选，2 多选
          start, // 1 表单域选择 2 嵌套表格拉单
          record: {
            ...params,
          },
        });
      }

      watch(
        () => props.moduleCode,
        (newVal) => {
          if (newVal) {
            fetch();
          }
        },
        { deep: true, immediate: true },
      );

      const handleSuccess = () => {};
      return {
        fetch,
        handleSuccess,
        handleClick,
        count,
        myCount,
        handleClickCount,
        count1,
        count3,
        count5,
        myVal,
        registerSmartModuleSelDrawer,
      };
    },
  });
</script>
<style lang="less" scoped></style>
